<template>
  <div class="cropper-tool">
    <h2>属性</h2>
    <div class="bar">
      <div :class="{ 'active-btn': activeIndex == 0 }">位置大小</div>
      <div>动画</div>
    </div>
    <ul>
      <li>
        <div class="name">坐标</div>
        <div class="tool">
          <el-input-number v-model="form.positionX" :controls="false">
            <template #prefix>
              <span>X</span>
            </template>
          </el-input-number>
          <el-input-number v-model="form.positionY" :controls="false">
            <template #prefix>
              <span>Y</span>
            </template>
          </el-input-number>
        </div>
      </li>
      <li>
        <div class="name">
          <span>宽高</span>
          <div @click="isLock = !isLock">
            <Lock v-if="isLock" />
            <ULock v-else />
          </div>

          <span></span>
        </div>
        <div class="tool">
          <el-input-number
            v-model="form.width"
            :controls="false"
            @input="changeWidth"
          >
            <template #prefix>
              <span>W</span>
            </template>
          </el-input-number>
          <el-input-number
            v-model="form.height"
            :controls="false"
            @input="changeHeight"
          >
            <template #prefix>
              <span>H</span>
            </template>
          </el-input-number>
        </div>
      </li>
      <li>
        <div class="name">对齐</div>
        <div class="tool-dt">
          <span>左</span>
          <span>中</span>
          <span>右</span>
          <span>上</span>
          <span>下</span>
        </div>
      </li>
      <li>
        <div class="name">旋转</div>
        <div class="tool">
          <el-input-number v-model="form.rote" :controls="false">
            <template #suffix>
              <span>度</span>
            </template>
          </el-input-number>
        </div>
      </li>
    </ul>
    <el-button type="primary" class="set-btns" @click="submitConfig"
      >确认设置</el-button
    >
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  config: {
    type: Object,
  },
});
const activeIndex = ref(0);
const isLock = ref(true);
const form = ref({
  positionX: 0,
  positionY: 0,
  width: 300,
  height: 300,
  rote: 0,
});
document.querySelector("cropper-view-box");
const emit = defineEmits(["submitConfig"]);
watch(
  () => props.config,
  (newVal) => {
    form.value = newVal;
  },
  {
    immediate: true,
    deep: true,
  }
);
onMounted(() => {
  let timer = setInterval(() => {
    function setImgConfig(imgElement) {
      const width = imgElement.naturalWidth;
      const height = imgElement.naturalHeight;
      form.value.width = width * 1;
      form.value.height = height * 1;
    }
    // 获取 .cropper-view-box 下的 img 标签
    const imgElement = document.querySelector(".cropper-view-box img");
    if (imgElement) {
      // 监听图片加载完成事件
      imgElement.addEventListener("load", () => {
        // 获取图片的宽高
        setImgConfig(imgElement);
      });
      // 如果图片已经加载完成，直接获取宽高
      if (imgElement.complete) {
        setImgConfig(imgElement);
      }
    }

    imgElement && clearInterval(timer);
  }, 1000);
});
const submitConfig = () => {
  emit("submitConfig", form.value);
};
const changeWidth = (value: any) => {
  if (value && value > 0) {
    let oldWidth = form.value.width || 1;
    let oldHeight = form.value.height || 1;
    form.value.width = value;
    // if (isLock.value) {
    //   form.value.height = parseInt((oldHeight / oldWidth) * value);
    // }
    // const imgElement = document.querySelector(".cropper-view-box img");
    // const imgcanvas = document.querySelector(".cropper-box-canvas img");
    // if (imgElement) {
    //   imgElement.style.width = value + "px";
    //   imgElement.style.height = form.value.height + "px";
    //   imgcanvas.style.width = value + "px";
    //   imgcanvas.style.height = form.value.height + "px";
    // }
  }
};
const changeHeight = (value: any) => {
  if (value && value > 0) {
    let oldWidth = form.value.width || 1;
    let oldHeight = form.value.height || 1;
    form.value.height = value;
    // if (isLock.value) {
    //   form.value.height = parseInt((oldWidth / oldHeight) * value);
    // }
    // const imgElement = document.querySelector(".cropper-view-box img");
    // const imgcanvas = document.querySelector(".cropper-box-canvas img");

    // if (imgElement) {
    //   imgElement.style.width = form.value.width + "px";
    //   imgElement.style.height = value + "px";
    //   imgcanvas.style.width = form.value.width + "px";
    //   imgcanvas.style.height = value + "px";
    // }
  }
};
</script>

<style lang="scss" scoped>
.cropper-tool {
  padding: 30px 20px;
  .bar {
    display: flex;
    align-items: center;
    margin-top: 20px;
    div {
      background-color: #fafafa;
      height: 34px;
      border-radius: 6px;
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }
    .active-btn {
      background-color: black;
      color: white;
    }
  }
  ul {
    margin-top: 20px;
    li {
      margin-top: 10px;
      .name {
        width: 130px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        svg {
          width: 20px;
        }
        div {
          cursor: pointer;
        }
      }
      display: flex;
      align-items: center;
      .tool-dt {
        width: 250px;
        background-color: #fafafa;
        height: 40px;
        display: flex;
        justify-content: space-around;
        color: #999;
        span {
          display: inline-block;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
      .el-input-number {
        width: 120px;
        margin-right: 10px;
        ::v-deep {
          .el-input__wrapper {
            background-color: #fafafa;
          }
        }
      }
    }
  }
  .set-btns {
    margin-top: 40px !important;
    width: 200px;
    display: block;
    margin: auto;
  }
}
</style>
